<script setup>
// ref 与 reactive 的区别
// ref可以定义 基本数据类型 + 对象类型变量
// reactive 适用于基本数据类型（早期不支持）+ 对象类型
import {ref, reactive} from 'vue';

var i = 0;

let count1 = ref(0);
let count2 = reactive(0);

 let msg1 = ref("wwy1");
 let msg2 = reactive("wwy1");

 let obj1 = ref({
    sno: 1,
    sname: "wwy1"
 });
 let obj2 = ref({
    sno: 1,
    sname: "wwy1"
 });

 function change(){
    msg1.value = "wwy2";
    msg2 = "wwy2";
    
    count1.value++;
    count2++;

    obj1.value = {
        sno: 2,
        sname: "wwy2"
    };
    obj2 = {
        sno: 2,
        sname: "wwy2"
    };
    i = 1;
 }

</script>

<template>
   {{ i }}

   <br/>

{{ msg1 }} == {{ msg2 }}

<br/>

{{ count1 }} == {{ count2 }}

<br/>

{{ obj1 }} == {{ obj2 }};

<br/>

<button v-on:click="change">点击一下</button>


</template>

<style>


</style>